<template>
  <view>
    <u-tag style="margin-top: 30rpx;margin-bottom: 30rpx;margin-right: 5%;width: 140rpx;float: right;" text="我的报修" mode="light" @click="gotoOrderList()" />
    <view class="select" @click="gotoRepairApply('电路')">
      <view style="margin-left: 10%">
        电路
      </view>
    </view>
    <view class="select" @click="gotoRepairApply('电器')">
      <view style="margin-left: 10%">
        电器
      </view>
    </view>
    <view class="select" @click="gotoRepairApply('排水')">
      <view style="margin-left: 10%">
        排水
      </view>
    </view>
    <view class="select" @click="gotoRepairApply('家具')">
      <view style="margin-left: 10%">
        家具
      </view>
    </view>
    <view class="select" @click="gotoRepairApply('其他')">
      <view style="margin-left: 10%">
        其他
      </view>
    </view>
  </view>
</template>

<script>
export default  {
  data () {
    return {

    }
  },
  methods: {
    gotoRepairApply(repairType) {
      uni.navigateTo({
        url: `/pages/repair/repairApply?repairType=${repairType}`, // 跳转的目标页面路径
      });
    },
    gotoOrderList() {
      uni.navigateTo({
        url: `/pages/repair/orderList`, // 跳转的目标页面路径
      });
    },
  },
  async onLoad() {

  }
}
</script>



<style>
.select {
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  margin-left: 5%;
  height: 160rpx;
  width: 90%;
  background: linear-gradient(to right, #B5A9C9, #CEC7DD);
  //#C1F4F9 #E0F6F8
  border-radius: 20rpx;
  color: #916CD0;
  font-size: 22px;
}
</style>